<template>
	<view>
		<navi-shell url="/pages/index/index">
			<text class="yonghu">{{yonghu}}个用户</text>
			<uni-search-bar placeholder="请输入关键词搜索" class="uni-searchbar" :radius="100" cancelButton="none"
				@confirm="search" @clear="clearKeywords" />
		</navi-shell>
		<view class="head-container">
			<view class="list">
				<text :class="panelStatus[0].visible?'xuanze1':'xuanze'" @click="pagination(0)">所有</text>
			</view>
			<view class="list">
				<text :class="panelStatus[1].visible?'xuanze1':'xuanze'" @click="pagination(1)">申请教师</text>
			</view>
			<view class="list">
				<text :class="panelStatus[2].visible?'xuanze1':'xuanze'" @click="pagination(2)">教师</text>
			</view>
			<view class="list">
				<text :class="panelStatus[3].visible?'xuanze1':'xuanze'" @click="pagination(3)">学生</text>
			</view>
			<view class="list">
				<text :class="panelStatus[4].visible?'xuanze1':'xuanze'" @click="pagination(4)">已禁止</text>
			</view>
		</view>
		<view v-if="panelStatus[0].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei">
				<text class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
				<text class="surname">{{user.nickName +"["+userTypes[user.type]+"]"}}</text>
			</view>
		</view>
		<view v-if="panelStatus[1].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei" v-if="user.apply==true">
				<text class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
				<text class="surname">{{user.nickName}}</text>
			</view>
		</view>
		<view v-if="panelStatus[2].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei" v-if="user.type==1">
				<text class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
				<text class="surname">{{user.nickName}}</text>
			</view>
		</view>
		<view v-if="panelStatus[3].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei" v-if="user.type==2">
				<text class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
				<text class="surname">{{user.nickName}}</text>
			</view>
		</view>
		<view v-if="panelStatus[4].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei" v-if="user.type==-1">
				<text class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
				<text class="surname">{{user.nickName}}</text>
			</view>
		</view>
		<view v-if="panelStatus[5].visible" class="allUser">
			<view v-for="(user,index) in users" :key="index" class="fenlei">
				<text v-if="user.type!=-1" class="iconfont icon-bubble_arrow_down img-menu " @click.stop="clickPopMenu(user)"></text>
				<image :src="'http://localhost:8081/'+ user.avatar" mode="widthFix" class="img1"
					@click.stop="clickShowUser(user)"></image>
					<text v-if="user.applyTeacher==true"></text>
				<text class="surname">{{user.nickName+"["+userTypes[user.type + 1]+"]"}}</text>
			</view>
		</view>
		<!-- 组件使用 -->
		<dialog-shell ref="shell" title="个人信息" @comfirm="dosth">
			<text style="padding-left: 100rpx;padding-top: 10rpx;margin-top:20rpx;">{{userDesc}}</text>
			<text style="padding-left: 100rpx;padding-top: 10rpx;">{{userU}}</text>
			<text style="padding-left: 100rpx;padding-top: 10rpx;">{{userS}}</text>
		</dialog-shell>
		<login-dialog ref="login"></login-dialog>
	</view>
</template>
<script>
	const app = getApp()
	let page = 0
	export default {
		data() {
			return {
				users: [],
				token: app.globalData.token,
				userDesc: "",
				userU: "",
				userS: "",
				yonghu: 0,
				searching: false,
				count: -1,
				userTypes: ["管理员", "教师", "学生"],
				panelStatus: [{
						visible: true
					}, {
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
				], //用于判断当前数据面板的开关状态
			}
		},
		onLoad() {
			this.getAllUser()
		},
		methods: {
			pagination(index) {
				let now = this.panelStatus[index].visible
				this.panelStatus[index].visible = !now

			},
			clickShowUser(users) {
				this.yonghu = users.length
				this.userDesc = "昵称：" + users.nickName
				this.userU = "用户名：" + users.userName
				this.userS = "身份： " + users.type
				this.$refs.shell.showDialog()
			},
			//确定按钮
			dosth() {
				uni.showToast({
					title: "自定义组件事件"
				});
			},
			clearKeywords() {
				this.searching = false
				this.users = []
				page = 0
				this.getAllUser()
			},
			//搜索框
			search(e) {
				let kw = e.value
				if (kw.trim().length == 0) {
					return
				}
				this.searching = true
				this.users = []
				this.count = -1
				let url = this.$params.host + this.$params.action_search + kw
				let data = {
					token: app.globalData.token
				}
				this.$request.get(url, data, res => {
					this.users = res.data.data
				})
			},
			//弹出菜单
			clickPopMenu(user) {
				uni.showActionSheet({
					itemList: ["禁止登录", "审批通过", "驳回申请"],
					success: res => {
						if (res.tapIndex == 0) {
							this.switchMark(user.id)
						} else if (res.tapIndex == 0) {
							this.deleteBlog(user)
						} else {
							this.deleteBlog(user)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			switchMark(id) {
				let url = this.$params.host + this.$params.action_admin + this.$params.action_admin_ban
				let data = {
					token: app.globalData.token,
					"id": id
				}
				this.$request.get(url, data, res => {
					this.users = res.data.data
					console.log(res);
				})
				console.log("点击了禁止登录");
			},
			deleteBlog(user) {
				console.log("点击了删除");
			},
			getAllUser() {
				let url = this.$params.host + this.$params.action_admin
				let data = {
					token: app.globalData.token
				}
				this.$request.get(url, data, res => {
					this.users = res.data.data
					console.log(res);
				})
			}
		}
	}
</script>


<style>
	@import url("admin.css");
</style>
